<template>
  <div>
    <h3>欢迎光临_vue开发的收银系统_水果店</h3>
    <table>
      <tr>
        苹果10￥/斤，折扣《8折》
      </tr>
      <tr>
        请输入你要购买的斤数<input type="text" v-model="arr" />
      </tr>
      <tr>
        <button @click="add">结账买单~</button>
      </tr>
      <tr>
        结账单：总价：{{
          zen
        }}￥元 折后价：<span>{{ zen * 0.8 }}</span
        >￥元 省了：{{
          zen * 0.2
        }}￥元
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      aee: 10,
      arr: 0,
      zen: 0,
    };
  },
  methods: {
    add() {
      this.zen = this.aee * this.arr;
    },
  },
};
</script>

<style scoped></style>
